<template>
  <div class="main">
    <!-- 顶部栏 -->
    <van-nav-bar
      title="我的信息"
      left-arrow
      fixed
      @click.left.native="$router.go(-1)"
    >
    </van-nav-bar>

    <div class="bg">
      <img src="../assets/imgs/mine/bg.png" alt="" />
    </div>
    <!-- 账号所有数据 -->
    <div class="inf">
      <!-- 头像和相关数据信息 -->
      <div class="m_head">
        <div class="user">
          <div v-if="user == null">
            <van-image
              class="head"
              round
              width="4rem"
              height="4rem"
              src="/imgs/head/1.jpg"
            />
            <router-link to="/login">
              <div>请您登录~</div>
            </router-link>
          </div>
          <div v-else class="dl">
            <van-image
              class="head"
              round
              width="4rem"
              height="4rem"
              :src="imgURL + user.data.avatar"
            />
            <div>
              <van-uploader :after-read="afterRead" :max-count="1" class="sty">
              </van-uploader>
              <router-link to="/home/personal">欢迎~{{ user.data.unames }}</router-link>
            </div>
          </div>
        </div>
        <div class="assets">
          <div>
            <span>{{user.data.discount}}</span>
            <span>奈雪券</span>
          </div>
          <div>
            <span>{{user.data.integral}}</span>
            <span>积分商城</span>
          </div>
          <div>
            <span>{{user.data.balance}}</span>
            <span>余额(元)</span>
          </div>
          <div>
            <span>{{user.data.card}}</span>
            <span>礼品卡</span>
          </div>
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="swiper">
        <van-swipe :autoplay="2000" :show-indicators="false">
          <van-swipe-item>
            <img src="../assets/imgs/banners/default_swiper01.jpg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/imgs/banners/default_swiper02.jpg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../assets/imgs/banners/default_swiper03.jpg" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 我的服务 -->
      <div class="serve">
        <h3>我的服务</h3>
        <div>
          <van-grid :column-num="4" :border="false">
            <van-grid-item icon="balance-o" text="储蓄有礼" badge="HOT" />
            <van-grid-item icon="calendar-o" text="积分签到" />
            <van-grid-item icon="flower-o" text="送TA心意" />
            <van-grid-item icon="chat-o" text="联系客服" />
            <van-grid-item icon="exchange" text="兑换中心" />
            <van-grid-item icon="location-o" text="收货地址" />
            <van-grid-item icon="point-gift-o" text="入群有礼" badge="NEW" />
            <van-grid-item icon="apps-o" text="更多服务" />
          </van-grid>
        </div>
      </div>
      <div class="footer">
        <span>会员卡适用于奈雪的茶和奈雪酒屋指定范围</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["user", "imgURL"]),
  },
  data() {
    return {
      imgu: null,
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file.file);
      const url = "user/upload";
      const fd = new FormData();
      fd.append("uploadFile", file.file);
      this.axios.post(url, fd).then((res) => {
        console.log("上传图片信息:", res);
        if (res.status == 200) {
          this.$dialog
            .alert({
              message: "头像更改成功",
              theme: "round-button",
            })
            .then(() => {
              let imgu = res.data[0].split("/").pop();
              this.imgu = imgu;
              console.log("截取到的图片路径:", imgu);
              //将截取到的路径存入头像服务器文件
              this.$store.commit("updateHead", imgu);
              //将截取到的路径存入数据库user中
              this.$store.commit("updateA", imgu);
              console.log("user", this.user);
              //头像更改成功，更改数据库里avatar数据
              this.updateAvatar();
            });
        }
      });
    },
    // 修改头像的路由
    updateAvatar() {
      const url = "user/avatar";
      const params = `avatar=${this.imgu}&uid=${this.user.data.uid}`;
      this.axios.post(url, params).then((res) => {
        console.log("头像信息:", res);
      });
    },
  },
};
</script>

<style lang="scss">
.main {
  width: 100vw;
  height: 120vh;
  background-color: #f8f9f8;
  position: relative;
}
//顶部背景
.bg {
  width: 100%;
  margin-top: 46px;
  img {
    width: 100%;
    height: 60vw;
    display: block;
  }
}
.inf {
  width: 96vw;
  position: absolute;
  top: 45vw;
  //background: red;
  padding: 0 2vw;
  .m_head {
    border-radius: 2vw 2vw 0 0;
    height: 45vw;
    background: #fff;
    .user {
      text-align: center;
      div a {
        color: #a7abae;
      }
      .dl {
        position: relative;
        .van-uploader__upload {
          width: 4vw;
          height: 4vw;
          margin: 0;
          padding: 0;
          position: absolute;
          top: -10vw;
          left: 18vw;
          color: red;
        }
        div a{
          color: red;
        }
      }
    }
    .assets {
      display: flex;
      justify-content: space-between;
      margin-top: 5vw;
      div {
        width: 25%;
        text-align: center;
        span {
          display: block;
          font-weight: 600;
        }
      }
    }
  }
  .swiper {
    width: 96vw;
    height: 35vw;
    margin-top: 5vw;
    img {
      width: 100%;
      height: 35vw;
      display: block;
    }
  }
  .serve {
    margin-top: 5vw;
    border-radius: 1vw;
    background-color: #fff;
    h3 {
      padding: 4vw 5vw;
      font-weight: 500;
      margin-top: 4vw;
    }
  }
  .footer {
    margin-bottom: 50px;
    text-align: center;
    margin-top: 2vw;
    padding-bottom: 2vw;
    span {
      font-size: 3vw;
      color: #a7abae;
    }
  }
}
</style>